<template>
  <div class="list-page">
    <div class="list-page-main">
      <div class="pb20">
        <NButton type="primary" @click="handAdd()">
          <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
          <span class="pl8">添加</span>
        </NButton>
      </div>
      <NDataTable
        style="flex: 1"
        flex-height
        :columns="columns"
        :loading="tableInfo.listLoading"
        :data="tableInfo.tableData"
      />
    </div>
    <Edit ref="addRef" @success="queryData" />
    <Auth ref="authRef" @success="queryData" />
    <DelConfirm ref="delRef" @confirm="delConfirm" />
  </div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue'
import { NButton, NDataTable } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import roleApi from '@/service/api/setting/role'
import Edit from './components/Edit.vue'
import Auth from './components/Auth.vue'
import { useApi } from '@/hooks/useApi'
import DelConfirm from '@/components/nComponents/DelConfirm'

const addRef = ref()
const delRef = ref()
const authRef = ref()
const handAuth = (row: any) => {
  authRef.value.open(row)
}

const dataMap = (data: any) => {
  return data.map((el: any) => {
    el.menu_ids = el.menu_ids.map((item: any) => {
      return Number(item)
    })
    return el
  })
}
const { handAdd, tableInfo, queryData, handDel, delConfirm } = useApi({
  addRef,
  delRef,
  getData: roleApi.allList,
  dataMap,
  delData: roleApi.del,
  isPaging: false
})
/**
 *  获取列表
 * */
const columns: DataTableColumns<any> = [
  {
    title: '角色名称',
    key: 'roleName'
  },
  {
    title: '角色Code',
    key: 'roleCode'
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    width: 300,
    render(row: any) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            class: 'ml10',
            onClick: () => handAdd(row)
          },
          { default: () => '编辑' }
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            class: 'ml10',
            onClick: () => handAuth(row)
          },
          { default: () => '授权' }
        ),
        h(
          NButton,
          {
            size: 'small',
            class: 'ml10',
            type: 'error',
            onClick: () => handDel(row)
          },
          { default: () => '删除' }
        )
      ])
    }
  }
]
</script>

<style lang="scss" scoped></style>
